<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能日记助手</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 头部标题 -->
        <header class="header">
            <h1>智能日记助手</h1>
            <p>AI润色、灵感协助、风格定制 - 让你的日记更有温度</p>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 展开按钮（收起状态下显示） -->
            <button id="expandExamples" class="expand-examples-btn" style="display: none;">📖</button>
            
            <!-- 左侧日记列表区域 -->
            <div class="examples-sidebar" id="examplesSidebar">
                <div class="examples-header">
                    <h3>我的日记</h3>
                    <button id="toggleExamples" class="toggle-btn">收起</button>
                </div>
                
                <!-- 日记风格选择器 -->
                <div class="diary-style-selector">
                    <label for="diaryStyleSelect">写作风格：</label>
                    <select id="diaryStyleSelect">
                        <option value="emotional">感性风格</option>
                        <option value="verbose">话痨风格</option>
                        <option value="minimal">简约风格</option>
                    </select>
                </div>
                
                <!-- 新建日记和文件上传区域 -->
                <div class="diary-actions">
                    <button id="newDiaryBtn" class="new-diary-btn">新建日记</button>
                    <div class="file-upload-area">
                        <input type="file" id="fileInput" accept=".txt" style="display: none;">
                        <button id="uploadBtn" class="upload-btn">上传TXT文件</button>
                        <p class="upload-hint">支持将文本文件转换为日记内容</p>
                    </div>
                </div>
                <div class="examples-content">
                    <!-- 日记列表 -->
                    <div class="diary-list" id="diaryList">
                        <!-- 示例日记条目 -->
                        <div class="diary-item" data-id="demo1">
                            <div class="diary-header">
                                <h4>今天的小确幸</h4>
                                <span class="diary-date">2024-01-15</span>
                            </div>
                            <div class="diary-preview">
                                今天在咖啡店遇到了一只特别可爱的小猫，它一直在我脚边蹭来蹭去...
                            </div>
                        </div>
                        
                        <div class="diary-item" data-id="demo2">
                            <div class="diary-header">
                                <h4>工作感悟</h4>
                                <span class="diary-date">2024-01-14</span>
                            </div>
                            <div class="diary-preview">
                                今天完成了一个重要的项目，虽然过程很辛苦，但看到最终成果还是很有成就感...
                            </div>
                        </div>
                        
                        <div class="diary-item" data-id="demo3">
                            <div class="diary-header">
                                <h4>读书笔记</h4>
                                <span class="diary-date">2024-01-13</span>
                            </div>
                            <div class="diary-preview">
                                今天读了一本关于时间管理的书，里面提到的番茄工作法很有启发...
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间日记编辑器区域 -->
            <div class="editor-section">
                <div class="editor-header">
                    <h2>日记编辑器</h2>
                    <div class="editor-tools">
                        <input type="text" id="diaryTitle" placeholder="日记标题..." class="title-input">
                        <button id="saveDiaryBtn" class="tool-btn save-btn">保存日记</button>
                        <button id="clearBtn" class="tool-btn">清空</button>
                        <button id="copyBtn" class="tool-btn">复制全部</button>
                    </div>
                </div>
                <textarea 
                    id="contentEditor" 
                    placeholder="在这里记录你的生活点滴、感悟思考..."
                    rows="25"
                >今天是个特别的日子，想要记录下来。

早上起床的时候，阳光正好透过窗帘洒在床上，那种温暖的感觉让我觉得今天会是美好的一天。</textarea>
            </div>

            <!-- 右侧AI功能区域 -->
            <div class="ai-section">
                <!-- AI功能区域收起按钮 -->
                <button id="collapseAiSection" class="collapse-ai-btn">收起</button>
                
                <!-- AI功能按钮 -->
                <div class="ai-functions">
                    <h2>AI写作助手</h2>
                    <div class="function-buttons">
                        <button id="polishBtn" class="ai-btn polish-btn">
                            <span class="btn-icon">✨</span>
                            <span class="btn-text">润色美化</span>
                            <span class="btn-desc">让文字更有温度</span>
                        </button>
                        <button id="expandBtn" class="ai-btn expand-btn">
                            <span class="btn-icon">📝</span>
                            <span class="btn-text">灵感扩展</span>
                            <span class="btn-desc">丰富情感表达</span>
                        </button>
                        <button id="summarizeBtn" class="ai-btn summarize-btn">
                            <span class="btn-icon">📋</span>
                            <span class="btn-text">精华提炼</span>
                            <span class="btn-desc">提取核心感悟</span>
                        </button>
                    </div>
                </div>

                <!-- API配置区域 -->
                <div class="api-config">
                    <div class="config-header">
                        <h3>API配置</h3>
                        <button id="toggleConfig" class="toggle-btn small">设置</button>
                    </div>
                    <div id="configPanel" class="config-panel" style="display: none;">
                        <div class="config-item">
                            <label for="apiKeyInput">智谱API密钥：</label>
                            <input type="password" id="apiKeyInput" placeholder="请输入你的API密钥" />
                            <button id="saveApiKey" class="save-btn">保存</button>
                        </div>
                        <div class="config-status">
                            <span id="configStatus">未配置</span>
                        </div>
                        <div class="config-help">
                            <p>获取API密钥：<a href="https://open.bigmodel.cn/" target="_blank">智谱AI开放平台</a></p>
                        </div>
                    </div>
                </div>

                <!-- AI结果显示区域 -->
                <div class="ai-result">
                    <div class="result-header">
                        <h3>AI创作建议</h3>
                        <button id="copyResultBtn" class="copy-btn" style="display: none;">复制结果</button>
                    </div>
                    <div id="resultContent" class="result-content">
                        <div class="placeholder">
                            <p>选择日记中的文字，然后点击上方AI功能按钮</p>
                            <p>AI将为你的日记提供温暖的润色建议</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- AI对话窗口区域 -->
            <div class="chat-section">
                <div class="chat-header">
                    <h3>AI对话</h3>
                    <div class="chat-controls">
                        <button id="exportChatBtn" class="export-btn">导出对话</button>
                        <button id="clearChatBtn" class="clear-btn">清空</button>
                    </div>
                </div>
                <div class="chat-messages" id="chatMessages">
                    <div class="chat-placeholder">
                        <p>💬 开始与AI对话</p>
                        <p>在下方输入框中输入问题，AI将为你提供帮助</p>
                    </div>
                </div>
                <div class="chat-input-area">
                    <div class="chat-input-container">
                        <textarea id="chatInput" placeholder="输入你的问题..." rows="3"></textarea>
                        <button id="sendChatBtn" class="send-btn">发送</button>
                    </div>
                </div>
            </div>
            
            <!-- AI功能区域展开按钮（收起状态下显示） -->
            <button id="expandAiSection" class="expand-ai-btn" style="display: none;">🤖</button>
        </main>

        <!-- 底部信息 -->
        <footer class="footer">
            <p>基于智谱GLM-4.5-Flash API | 让AI成为你的贴心日记伙伴 ✨</p>
        </footer>
    </div>

    <!-- 加载提示 -->
    <div id="loadingModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="loading-spinner"></div>
            <p>AI正在处理中，请稍候...</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>